<template>
  <el-table
    ref="gridRef"
    style="width: 100%"
    v-bind="$attrs"
    :height="height"
    :stripe="stripe"
    :border="border"
    :highlight-current-row="highlightCurrentRow"
    :data="dataList"
    :row-key="gridMeta.idName"
    @selection-change="selectionChange"
    @current-change="currentChange"
  >
    <!--显示选择框-->
    <el-table-column v-if="!($attrs['show-summary'])"
      type="selection"
      width="55"
      align="center"
      header-align="center"
    >
    </el-table-column>
    <!--显示字段列表-->
    <template
      v-for="(id, index) in gridMeta.colOrder"
      :key="'grid_list_' + index + '_' + id"
    >
      <!--带插槽的列-->
      <el-table-column
        v-if="(slotsKey.includes(itemMeta[id].colName))"
        :column-key="'col_' + id"
        v-bind="itemMeta[id]"
      >
        <template #header
          v-if="slotsKey.includes('header_' + itemMeta[id].colName)"
        >
          <slot :name="'header_' + itemMeta[id].colName"></slot>
        </template>
        <template #default="scope">
          <slot :name="itemMeta[id].colName" v-bind="scope"></slot>
        </template>
      </el-table-column>
      <!--不带插槽的列-->
      <el-table-column v-else
        :key="'grid_list_' + index + '_' + id"
        :column-key="'col_' + id"
        :min-width="50"
        v-bind="itemMeta[id]"
        :prop="itemMeta[id].colName"
      >
      </el-table-column>
    </template>
  </el-table>
</template>

<script setup lang="ts" generic="T extends object">
  /**
   * 支持插槽扩展的列表
   */

  import { ref } from 'vue'
  // 表单控件的属性 
  import type { IGridProps } from '../map'
  import { myExpose } from '../map'

  import choiceManage from './controller'

  defineOptions({
    name: 'nf-elp-grid-list-slot',
    inheritAttrs: false,
  })
  const props = withDefaults(defineProps<IGridProps<T>>(), {
    height: 500,
    stripe: true, // 是否为斑马纹 table
    border: true, // 是否带有纵向边框
    highlightCurrentRow: true, //是否要高亮当前行
  })

  const { selection, gridMeta } = props

  const slots = defineSlots()
  const slotsKey = Object.keys(slots)

  // 获取 el-table 
  const { refControl, expose } = myExpose()
  // 暴露 el-form
  defineExpose({ expose })

  // 列表选项的事件
  const {
    currentChange, // 单选
    selectionChange // 多选
  } = choiceManage(selection, gridMeta, refControl)

</script>
